<template>
	<div class="main">
		<div class="title">
			查询结果
		</div>
		<div class="tab">
			<Input class="search-ipt" placeholder="搜索结果"></Input>
			<Table border :columns="columnsTitle" :data="data2" style="position:static">
			</Table>
		</div>
		<div>
			{{ resData }}
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			du: '℃',
			columnsTitle: [
				// 序号
				{
					title: '#',
					key: 'interval1',
					width: '50',
					sortable: true
				},
				// 设备id或运单号
				{
					title: 'id',
					width: '100',
					key: 'serialId'
				},
				// 温度
				{
					title: '温度',
					width: '70',
					key: 'CurrentTemp'
				},
				// 记录间隔
				{
					title: '状态',
					key: 'interval2'
				},
				// 位置
				{
					title: '位置',
					key: 'readPlace'
				},
				// 更新时间
				{
					title: '更新时间',
					key: 'readTime'
				},
				// {
				//     title: '报警',
				//     key:'报警'
				// },
				// 电量
				{
					title: '电量',
					key: 'batValue',
					sortable: true,
					render: (h, params) => {
						// 电量信息
						let batteryNum = params.row.batValue
						// 转换为 number 类型
						batteryNum = parseFloat(batteryNum)
						return h('div', {
							'class': {
								battery: true
							}
						}, [
							h('Progress', {
								props: {
									percent: batteryNum, // 数值
									strokeWidth: 20, // 高度
									status: (batteryNum < 31) ? 'wrong' : 'normal', // 状态
									hideInfo: true
								}
							}),
							h('span')
						])
					}
				},
				// 小图表,独立封装，render引入
				{
					title: '数据',
					key: 'startToReadTemp',
					render: (h, params) => {
						return h('div', {
							'class': {
								data: true
							}
						}, [

						])
					}
				},
				// 平均温度
				{
					title: '详情',
					key: 'avgTemperature'
				}
			],
			data2: [
				{
					interval1: 1,
					serialId: 210000001,
					CurrentTemp: 20.23 + '℃',
					interval2: '记录',
					readPlace: '上海',
					readTime: '2018/4/3 23:14',
					batValue: 29,
					startToReadTemp: ['1', '2', '3', '4'],
					avgTemperature: '查看'
				},
				{
					interval1: 1,
					serialId: 210000002,
					CurrentTemp: 21.20 + '℃',
					interval2: '记录',
					readPlace: '上海',
					readTime: '2018/4/3 23:14',
					batValue: 31,
					startToReadTemp: ['0', '9', '1', '3'],
					avgTemperature: '查看'
				},
				{
					interval1: 1,
					serialId: 210000003,
					CurrentTemp: 23.35 + '℃',
					interval2: '记录',
					readPlace: '上海',
					readTime: '2018/4/3 23:14',
					batValue: 78,
					startToReadTemp: ['10', '9', '8', '7'],
					avgTemperature: '查看'
				},
				{
					interval1: 1,
					serialId: 210000004,
					CurrentTemp: 21.00 + '℃',
					interval2: '记录',
					readPlace: '上海',
					readTime: '2018/4/3 23:14',
					batValue: 100,
					startToReadTemp: ['6', '5', '4', '3'],
					avgTemperature: '查看'
				}
			]
		}
	},
	computed: {
		resData() {
			return this.$store.state.resData
		},
	},
	created() {
	},
	methods: {
	}
}
</script>

<style lang="less" scoped>
// 表格
.ivu-table-wrapper /deep/ {
	border: 0;
}

.main /deep/ {
	border: 1px solid #ddd;

	// 标题
	.title {
		padding: 14px 15px 7px;
		border: solid #e7eaec;
		border-top-width: 4px;
		border-bottom-width: 1px;
		border-left: 0;
		border-right: 0;
		font-size: 1.15em;
	}

	.tab {
		padding: 15px 20px 20px;

		.search-ipt {
			margin-bottom: 10px;
		}
	}

	table {
		th {
			text-align: center;
			background: none;
			border-right: 0;
		}

		td {
			border-right: 0;
		}
	}

	.ivu-table-cell {
		padding: 0;
		display: flex;
		justify-content: center;
	}

	// 电池进度
	.ivu-progress-show-info .ivu-progress-outer {
		padding: 0;
		margin: 0;
	}

	.battery {
		border: 1px solid #999;
		border-radius: 4px;
		padding: 1px;
		position: relative;
		width: 50px;

		>span {
			position: absolute;
			background-color: #999;
			border-radius: 0 2px 2px 0;
			display: block;
			.size(4px, 8px);
			top: 6px;
			right: -4px;
		}

		.ivu-progress-inner,
		.ivu-progress-bg {
			border-radius: 4px;
		}
	}
}</style>
